<template>
    <div style="height: 50px;">
        <el-button @click="Add()">保存</el-button>
    </div>


    <table border="1" style="border-collapse: collapse; width: 60%; height: 40px; text-align: center; margin:auto">
        <tr>
            <td>客户名称</td>
            <td>
                <input style="width: 100%;height: 40px; text-align: center;" v-model="form.clientName" :disabled="true"
                    clearable />
            </td>
        </tr>
        <tr>
            <td>本次退款总额</td>
            <td>
                <input style="width: 100%;height: 40px; text-align: center;" v-model="form.planAmount" :disabled="true"
                    clearable />
            </td>
        </tr>
        <tr>
            <td>本次退款金额</td>
            <td>
                <input style="width: 100%;height: 40px; text-align: center;" v-model="add.aReceivableAmount" clearable
                    @change="jine" />
            </td>
        </tr>
        <tr>
            <td>退款日期</td>
            <td>
                <input style="width: 100%;height: 40px; text-align: center;" type="date" v-model="add.apDocumentDate"
                    clearable />
            </td>
        </tr>
        <tr>
            <td>剩余应退金额</td>
            <td>
                <input style="width: 100%;height: 40px; text-align: center;" v-model="form.sheng" :disabled="true"
                    clearable />
            </td>
        </tr>
        <tr>
            <td>退款方式</td>
            <td>
                <select style="width: 100%; height: 40px;" v-model="add.aReceivableWay">
                    <option value="现金">现金</option>
                    <option value="转账">转账</option>
                    <option value="支票">支票</option>
                    <option value="微信">微信</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>退款账号</td>
            <td>
                <select style="width: 100%; height: 40px;" v-model="add.aReceivableAccount">
                    <option value="中国建设银行杭州市上城区支行">中国建设银行杭州市上城区支行</option>
                    <option value="中信银行河西路支行">中信银行河西路支行</option>
                    <option value="中国民生银行股份有限公司成都新都支行">中国民生银行股份有限公司成都新都支行</option>
                    <option value="上海浦发银行股份有限公司上海支行">上海浦发银行股份有限公司上海支行</option>
                    <option value="中国农业银行成都市金牛区支行">中国农业银行成都市金牛区支行</option>
                    <option value="中国农业银行双云路支行">中国农业银行双云路支行</option>
                    <option value="中国农业银行后海路支行">中国农业银行后海路支行</option>
                    <option value="中国农业银行琉璃街支行">中国农业银行琉璃街支行</option>
                    <option value="中国工商银行林京路支行">中国工商银行林京路支行</option>
                    <option value="建设银行大冶街支行">建设银行大冶街支行</option>
                    <option value="中国农业银行小南街支行">中国农业银行小南街支行</option>
                </select>
            </td>
        </tr>
    </table>
</template>

<script setup lang='ts'>
import axios from 'axios'
import * as XLSX from 'xlsx';
import { ref, reactive, onMounted, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter, useRoute } from 'vue-router';
const router = useRouter();
const route = useRoute();
import http from '../../../http.js'

const form = reactive({
    clientName: "",
    planAmount: 0,
    sheng: ''
})


const add = reactive({
    "arNumber": "",
    "aClientName": "",
    "aReceivableAmount": "",
    "apDocumentDate": "",
    "aReceivableWay": "",
    "aReceivableAccount": ""
})


//反填
const Fan = () => {
    axios.get(http.zblnb + '/cw/api/Receivable/FanReceivable?sCcontractNumber=' + route.query.sCcontractNumber)
        .then(res => {
            console.log(res.data.data)
            let d = res.data.data
            form.clientName = d.clientName
            form.planAmount = route.query.planAmount
        })
}


//添加
const Add = () => {
    var adds = {
        arNumber: add.arNumber,
        aClientName: form.clientName,
        aReceivableAmount: add.aReceivableAmount,
        apDocumentDate: add.apDocumentDate,
        aReceivableWay: add.aReceivableWay,
        aReceivableAccount: add.aReceivableAccount,
    }
    console.log(adds)
    axios.post(http.zblnb + '/cw/api/Receivable/AddReceivable', adds)
        .then(res => {
            console.log(res.data)
            if (res.data.data > 0) {
                ElMessage.success('添加成功');
                router.push('/AccountList');
            }
            else {
                ElMessage.error('添加失败');
            }
        })
}

//计算剩余金额
const jine = () => {
    form.sheng = form.planAmount - add.aReceivableAmount;
}



onMounted(() => {
    Fan();
})

</script>

<style></style>